<script setup>
import { inject, onMounted, ref, shallowRef } from "vue";
import { getCouncilByKey } from "@/api/council.js";
const getAssetsFile = inject("getAssetsFile");
import { useRoute } from "vue-router";
const route = useRoute();

const detail = shallowRef({
	name: null,
	position: null,
	technicalTitle: null,
	img: null,
	politicalAffiliation: null,
	work: null,
	professional: null,
	achievement: null,
	desc: null,
});

const getDetails = async () => {
	const id = route.query.id;
	const res = await getCouncilByKey({ id });
	if (res.data.code === 200) {
		detail.value = {
			name: res.data.data.name,
			position: res.data.data.technicalTitles,
			technicalTitle: res.data.data.technicalTitles,
			img: res.data.data.photoFiles?.length ? res.data.data.photoFiles[0].accessUrl : null,
			politicalAffiliation: res.data.data.politicsStatus,
			work: res.data.data.work,
			professional: res.data.data.engageWork,
			achievement: res.data.data.achievement,
			desc: res.data.data.desc,
		};
	}
};
onMounted(() => {
	getDetails();
});
</script>

<template>
	<div class="pageContent">
		<n-space align="center" justify="space-between" style="margin-bottom: 20px">
			<n-h6 class="pageTitle" prefix="bar">
				<div>专家介绍</div>
			</n-h6>
		</n-space>
		<n-divider class="pageDivider"></n-divider>
		<div class="detail">
			<n-space justify="space-between" align="start" :wrap="false">
				<div>
					<div class="detailName">
						{{ detail.name || "-" }}
					</div>
					<div class="detailPosition">职务: {{ detail.position || "-" }}</div>
					<div class="detailPosition">政治面貌: {{ detail.politicalAffiliation || "-" }}</div>
					<div class="detailPosition">工作单位: {{ detail.work || "-" }}</div>
					<div class="detailPosition">技术职称: {{ detail.technicalTitle || "-" }}</div>
					<div class="detailPosition"><span style="font-weight: bold">学术成果: </span>{{ detail.achievement || "-" }}</div>
					<div class="detailPosition"><span style="font-weight: bold; color: red">简介: </span>{{ detail.desc || "-" }}</div>
				</div>
				<img :src="detail.img" alt="" style="height: 276px; width: 215px; flex-grow: 1" />
			</n-space>
		</div>
	</div>
</template>

<style scoped>
.detail {
	width: calc(100% - 60px);
	padding: 30px;
	border: 1px solid #eeeeee;
}
.detailName {
	width: fit-content;
	font-size: 30px;
	font-weight: bold;
	margin-bottom: 20px;
	border-bottom: 4px solid var(--primary-color);
}
</style>
